<template>
  <div>
    <Row :gutter="10">
      <i-col span="6"
             :sm="24"
             :md="9"
             :lg="6">
        <Card :dis-hover="true"
              :shadow="true">
          <TreeMenu :isEdit="isEdit"
                    :menuData="menuData"
                    @addMenuEvent="addMenu"
                    @editMenuEvent="editMenu"
                    @deleteMenuEvent="deleteMenu"
                    @on-select="handleTreeChange"></TreeMenu>
        </Card>
      </i-col>
      <i-col span="18"
             :sm="24"
             :md="15"
             :lg="18">
        <Card :title="$t('Menu Options')"
              :dis-hover="true"
              :shadow="true"
              icon="ios-options"
              style="margin-bottom: 10px">
          <MenuForm :formData="formData"
                    :isEdit="isEdit"
                    :selectNode="selectNode"
                    @cancel="initForm"
                    @submit="submit"></MenuForm>
        </Card>
        <Card :title="$t('resources')"
              :dis-hover="true"
              :shadow="true"
              icon="ios-options">
          <OperationsTable :tableData="tableData"
                           :isEdit="isEdit"
                           @on-change="handleTableChange"></OperationsTable>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import TreeMenu from './tree.vue'
import MenuForm from './form.vue'
import OperationsTable from './operations.vue'
import {
  sortObj,
  updateNode,
  insertNode,
  deleteNode,
  getNode,
  sortMenus
} from '@/libs/util'
import { menuDispatch } from '@/service/api/admin'
export default {
  components: {
    TreeMenu,
    MenuForm,
    OperationsTable
  },
  data () {
    return {
      isEdit: false,
      type: '',
      selectNode: [],
      menuData: [],
      formData: {
        title: '',
        name: '', // 组件名称
        path: '',
        component: '',
        hideInBread: false,
        hideInMenu: false,
        notCache: false,
        icon: '',
        sort: 0,
        redirect: '',
        type: 'menu',
        link: '',
        operations: []
      },
      tableData: []
    }
  },
  mounted () {
    // console.log('test getRoutes')
    // menuDispatch.use('route').then((res) => {
    //   console.log('mounted -> res', res)
    // })
    this._getMenu()
  },
  methods: {
    _getMenu () {
      menuDispatch.use('get').then((res) => {
        this.menuData = res.list
      })
    },
    handleTreeChange (item) {
      if (item.length === 0) {
        return
      }
      // 非编辑状态
      if (!this.isEdit) {
        this.selectNode = item
        this.formData = item[0]
        // if (item[0].operations && item[0].operations.length > 0) {
        this.tableData = [...item[0].operations]
        // }
      } else {
        this.$Message.error('当前为编辑状态，请取消编辑后查看！')
      }
    },
    addMenu (type) {
      this.initForm()
      this.type = type
      this.isEdit = true
    },
    editMenu (select) {
      this.isEdit = true
      this.formData = select
    },
    deleteMenu (select) {
      // 判断是删除一级菜单 还是删除子菜单
      const parent = getNode(this.menuData, select)
      if (parent.nodeKey !== select.nodeKey) {
        // 删除子菜单
        menuDispatch.use('update', parent).then((res) => {
          if (res.code === 200) {
            this.$Message.success('删除子菜单成功！')
          }
        })
      } else {
        menuDispatch.use('delete', { _id: parent._id }).then((res) => {
          if (res.code === 200) {
            this.$Message.success('删除菜单成功！')
          }
        })
      }
      this.menuData = deleteNode(this.menuData, select)
    },
    submit (data) {
      let parent = getNode(this.menuData, this.selectNode[0])
      if (this.tableData.length > 0) {
        data.operations = this.tableData
      }
      // 1. 获取 formData中的数据 -> 插入menuData中
      //   a. type -> 数据插入的节点
      //   b. 数据需要按照tree的数据格式进行格式化 -> title
      if (this.type === 'bro') {
        // 兄弟节点
        if (this.menuData.length === 0) {
          menuDispatch.use('add', data).then((res) => {
            this.menuData.push(res)
            this.menuData = sortMenus([...this.menuData])
            this.$Message.success('添加菜单成功！')
            this.initForm()
          })
        } else {
          const selectNode = this.selectNode[0]
          // 1. 可能是一级节点的兄弟节点  -> addMenu -> menu
          if (parent.nodeKey === selectNode.nodeKey) {
            menuDispatch.use('add', data).then((res) => {
              this.menuData = insertNode(this.menuData, selectNode, res)
              this.menuData = sortMenus([...this.menuData])
              this.$Message.success('添加菜单成功！')
            })
          } else {
            // 2. 可能是二级节点的兄弟节点 -> parent 一级节点 -> updateMenu
            parent = getNode(this.menuData, selectNode)
            menuDispatch.use('update', parent).then((res) => {
              this.$Message.success('添加菜单成功！')
              this.menuData = sortMenus([...this.menuData])
            })
          }
          // this.selectNode.length > 0
        }
      } else if (this.type === 'child') {
        // 子节点
        if (typeof this.selectNode[0].children === 'undefined') {
          this.$set(this.selectNode[0], 'children', [data])
        } else {
          let arr = [
            ...this.selectNode[0].children,
            data
          ]
          // 排序
          arr = sortObj(arr, 'sort')
          this.$set(this.selectNode[0], 'children', arr)
        }
        parent = getNode(this.menuData, this.selectNode[0])
        // 更新操作
        menuDispatch.use('update', parent).then((res) => {
          this.menuData = sortMenus([...this.menuData])
          this.$Message.success('添加子菜单成功！')
        })
      } else {
        // 更新菜单节点 type == ''
        this.menuData = updateNode(this.menuData, data)
        this.$set(this.selectNode, 0, data)
        parent = getNode(this.menuData, this.selectNode[0])
        // 更新操作
        menuDispatch.use('update', parent).then((res) => {
          this.menuData = sortMenus([...this.menuData])
          this.$Message.success('更新菜单成功！')
        })
      }
    },
    initForm () {
      this.isEdit = false
      this.type = ''
      this.formData = {
        title: '',
        name: '', // 组件名称
        path: '',
        component: '',
        hideInBread: false,
        hideInMenu: false,
        notCache: false,
        icon: '',
        sort: 0,
        link: '',
        redirect: '',
        type: 'menu',
        operations: []
      }
      this.tableData = []
    },
    handleTableChange (table) {
      this.tableData = table
    }
  }
}
</script>
